<template>
  <div class="footer">
    <div class="footer-up">
      <div class="up-info case1">
        <div>
          <img src="/img/logolar.png" alt="">
        </div>
        <div>
          <img src="/img/phone.png" alt="">
          <span>(010) 6581-7155</span>
        </div>
        <div>
          <img src="/img/email.png" alt="">
          <span>melta@example.com</span>
        </div>
        <div>
          <img src="/img/position.png" alt="">
          <span>北京市昌平区回龙观街道吉晟别墅</span>
        </div>
      </div>
      <div class="up-info case2">
        <div>信息</div>
        <div>我的账户</div>
        <div>登录</div>
        <div>我的购物车</div>
        <div>我的心愿单</div>
        <div>我的订单</div>
      </div>
      <div class="up-info case3">
        <div>服务</div>
        <div>关于我们</div>
        <div>职位</div>
        <div>快递信息</div>
        <div>隐私策略</div>
        <div>条件与条款</div>
      </div>
      <div class="up-info case4">
        <div>订阅</div>
        <div>
          <span>在下面输入您的电子邮件，成为第一个了解新收藏的人</span>
        </div>
        <div>
          <div style="display: flex;align-items: center;">
            <img style="margin-right: 8px;" width="20px" height="20px" src="/img/email.png" alt="">
            <span>你的邮箱</span>
          </div>
          <div style="display: flex;align-items: center;">
            <img width="20px" src="/img/rightA.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="footer-down">
      <div>&copy;&nbsp;Copyright 2023 Melta All Rights are reserved</div>
      <div>
        <a target="_blank" href="https://beian.miit.gov.cn">{{ icp }}</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const icp = ref(import.meta.env.VITE_ICP_LICENSE)
</script>

<style lang="less" scoped>
.footer {
  margin: auto;
  width: 70%;
  font-family: 'Helvetica';
  
  .footer-up {
    display: flex;
    justify-content: space-between;

    .case1 {
      > div:first-child {
        margin-bottom: 35px;

        img {
          width: 82px;
          height: 82px;
        }
      }

      > div:not(:first-child,:last-child) {
        display: flex;
        align-items: center;

        img {
          display: inline-block;
          width: 19px;
          height: 19px;
          margin-right: 9px;
        }

        span {
          color: rgb(20, 28, 29);
          font-size: 16px;
          font-weight: 400;
          width: 180px;
          overflow-wrap: break-word;
        }
      }

      > div:last-child {
        display: flex;
        align-items: flex-start;

        img {
          display: inline-block;
          width: 19px;
          height: 19px;
          margin-right: 9px;
        }

        span {
          color: rgb(20, 28, 29);
          font-size: 16px;
          font-weight: 400;
          display: inline-block;
          width: 180px;
          overflow-wrap: break-word;
        }
      }

      > div:not(:first-child) {
        margin-top: 20px;
      }
    }

    .case2, .case3 {
      > div:first-child {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 700;
      }

      > div:not(:first-child) {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 400;
        margin-top: 18px;
      }
    }

    .case4 {
      > div:first-child {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 700;
      }

      > div:nth-child(2) {
        width: 311px;
        overflow: wrap;
        line-height: 30px;
        margin: 10px 0;
      }

      > div:last-child {
        width: 279px;
        height: 30px;
        border-radius: 10px;
        background: rgba(163, 170, 171, 0.1);
        padding: 13px 16px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.4s;
      }

      > div:last-child:hover {
        background-color: rgba(85, 85, 85, 0.1);
      }
    }
  }

  hr {
    width: 100%;
    border-top:1px solid rgba(163, 170, 171, 0.2);
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-top: 30px;
  }

  .footer-down {
    margin: 18px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    > div:first-child {
      display: flex;
      align-items: center;
      font-size: 14px;
    }

    > div:last-child {
      color: rgb(20, 28, 29);
      font-size: 14px;
      font-weight: 400;

      a {
        text-decoration: none;
        color: rgb(20, 28, 29);
        display: inline-block;
        margin-top: 5px;
      }
    }
  }
}
</style>